Add q param to algolia search, fix search term highlighting across html nodes#14080
Add q param to algolia search, fix search term highlighting across html nodes#14080
Conversation
…h term is across multiple html nodes
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
| activateTabsWithMatches(mainEl); | ||
| // Let the browser settle layout after Bootstrap tab transitions | ||
| // before calculating scroll position. | ||
| requestAnimationFrame(() => scrollToFirstMatch(mainEl)); |
There was a problem hiding this comment.
this was moved inside of highlight
| const fullMatches = item.text.matchAll(/<mark class='search-match'>(.*?)<\/mark>/g) | ||
| // extract capture group with the search match | ||
| // result e.g. ["def fiz"] | ||
| const searchMatches = [...fullMatches].map(match => match[1]) | ||
| if (searchMatches[0]) { |
There was a problem hiding this comment.
We no longer use the matching text in the search, like we did for text fragments. Instead, for the q param, we use the user's full query, exactly as they typed it, whether algolia found a match or not. Algolia doesn't always find matches that the highlighting can, so this should help the user find anything that matches what they typed.
| // After search highlighting, activate any tabs whose panes contain <mark> matches. | ||
| // This ensures that search results inside inactive Bootstrap tabs become visible. | ||
| // Handles nested tabsets by walking up ancestor panes and activating outermost first. | ||
| function activateTabsWithMatches(mainEl) { |
There was a problem hiding this comment.
Replaced with openAllTabsetsContainingEl
|
Code LGTM but I believe we have a stale playwright test now. |
|
Thanks for the work on cross-node highlighting — the So I am looking into this more, but the failing test is not stale, it just shows that this PR brings a regression compare to what I have tried to do in previous improvement. Here is my analysis for now These tests were added in #14053 and cover specific edge cases in how search interacts with Bootstrap tabsets. They pass on current main (https://github.com/quarto-dev/quarto-cli/actions/runs/22241123723, after #14053 merged). What the tests coverThe test fixture has multiple tabsets with search terms placed strategically to exercise different scenarios. The two failing tests are:
When a search term (gamma-both-tabs) exists in both the R tab (active by default) and the Python tab, the expected behavior is to leave the R tab active — it already shows a match, so switching tabs would be disruptive. The previous
When the user has a stored tab preference in What passesThe other 4 tests pass, which means the core mechanics work: activating an inactive tab for a match, nested tabset activation, not touching tabs when the match is outside tabs, and scrolling to the first match. SuggestionThe cross-node
I haven't verified locally whether there are other behavioral differences beyond what the tests catch (e.g., how the setTimeout scroll interacts with tab transitions vs the previous requestAnimationFrame approach), but these two are the confirmed regressions from CI. Happy to discuss it. The demo website is there to show current behavior: https://cderv.github.io/quarto-search-highlight-demo/ |
Examples
I highlighted and copied some text on various pages that spans decorated and undecorated text, then pasted it into algolia search, and these are the successful matches:
Description
This PR
q={search term}param, enabling multiple match highlightingI referenced @cderv's PR #14053 while finishing this PR. Building off of that, I found a method for opening containing tabsets that requires significantly less code. See
openAllTabsetsContainingEl